<template>
	<view class="">
		<tn-nav-bar alpha backTitle=""></tn-nav-bar>
			<view :style="{ paddingTop: vuex_custom_bar_height + 'px' }"> </view>


			<view class="title">
				<view>是否立即</view>
				<view>
					录入宠物面容
				</view>
			</view>
		<view class="face-container">
		
			<view class="face-card face-card-blue" @click="goAdd">
				<view class="face-card-title">立即录入</view>
				<image class="face-card-icon-l" style="width: 70rpx;height: 70rpx;" src="/static/image/xiangji.png" />
				<image class="face-card-icon-r" style="width: 200rpx;height: 150rpx;" src="/static/image/bai.png" />
			</view>
			<view class="face-card" @click="backIndex">
				<view class="face-card-title face-card-title-black" style="width: 80%;text-align: right;">稍后录入</view>
				<image class="face-card-icon-l" style="width: 200rpx;height: 150rpx;" src="/static/image/hei.png" />
				<image class="face-card-icon-r" src="/static/image/fan.png" />
			</view>
		</view>
		<view class="indicator">
			<view class="dot"></view>
			<view class="dot"></view>
			<view class="dot1"></view>
		</view>
	</view>
</template>

<script>
export default {
	methods: {
		goAdd() {
			uni.navigateTo({ url: './describe' })
		},
		backIndex() { 
			uni.redirectTo({ url: '/pages/index/index' })
		},
	}
}
</script>

<style scoped>
.title {
	
	font-size: 46rpx;
	font-weight: bold;
	margin-left: 32rpx;
	margin-bottom: 0rpx;
	color: #111;
	margin-top: 60px;
}
.face-container {
  margin-top: 72rpx;

	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 40rpx;
}

.face-card {
	width: 90vw;
	height: 350rpx;
	background: #fbfbfb;
	border-radius: 40rpx;
	box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.1);
	position: relative;
	padding: 50rpx 0;
	margin-bottom: 24rpx;
}

.face-card-blue {
	background: linear-gradient(135deg, #6dc6ff 0%, #3ca3f7 100%);
	color: #fff;
}

.face-card-title {
	position: absolute;
	left: 48rpx;
	top: 36rpx;
	font-size: 36rpx;
	font-weight: 500;
	color: #fff;
}

.face-card-title-black {
	color: #111;
}

.face-card-icon-l {
	position: absolute;
	left: 36rpx;
	bottom: 36rpx;
	width: 48rpx;
	height: 48rpx;
}

.face-card-icon-r {
	position: absolute;
	right: 36rpx;
	bottom: 36rpx;
	width: 72rpx;
	height: 72rpx;
}
</style>